<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>聊天窗口</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/command/bootstrap-4.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/chat/css/style.css">
    <script type="text/javascript" src="/command/jquery/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/chat/js/chat.js"></script>
</head>
<body>
<div>
    <div>

    </div>
    <div data-role="content" class="container" role="main">
        <div style="overflow: auto;height: 500px" id="messageData">
            <ul class="content-reply-box mg10" id="words">

            </ul>
        </div>
        <div>
            <input id="emojiBaseUri" type="hidden" value="/chat/images/">
            <input id="emoji" class="btn btn-primary" type="button" value="emoji" title="emoji"/>
            <button type="button" id="clearMessage" class="btn btn-warning">清屏</button>
            <button type="button" id="history" class="btn btn-info">历史</button>
            <label for="messageInput"></label>
            <!--            <input type="text" class="talk_word" id="talkwords">-->
            <textarea class="form-control" style="height: 65px" id="talkwords"></textarea>
            <button type="button" style="float: right" id="messageInput" class="btn btn-success">发送</button>
            <div id="emojiWrapper">
            </div>
        </div>
    </div>
</div>

<script>
    let href = window.location.href;
    let arr = href.split('/');
    let idData = arr[arr.length - 1];
    let idArr = idData.split("&");
    let uid = idArr[0];
    let oid = idArr[1];
    let username = sessionStorage.getItem("username");
    let Words = document.getElementById("words");

    let TalkWords = document.getElementById("talkwords");

    $.ajax({
        type: "POST",
        url: "/getuserinfobyid/" + oid,
        async: false,
        success: function (result) {
            if (result != null) {
                let oPic = result.pic;
                //let oName = result.username;
                //document.getElementById("oName").innerHTML += '<div class="cen">' + oName + '</div>';
                sessionStorage.setItem("oPic", oPic);
            }
        },
        error: function (errorMsg) {
            alert("获取头像失败");
        }
    });

    let picSrc = "data:image/jpeg;base64," + sessionStorage.getItem("pic");
    let oPicSrc = "data:image/jpeg;base64," + sessionStorage.getItem("oPic");

    let webSocket = null;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8080/chat/" +
            sessionStorage.getItem("uid") +
            "&" + oid
        );
    } else {
        alert("浏览器不支持webSocket！");
    }

    webSocket.onopen = function () {
        console.log("连接成功");
    };
    //刷新div

    webSocket.onmessage = function (event) {
        let obj = JSON.parse(event.data);

        let type = obj.type;
        let message = obj.message;
        if (type[0].type === "message") {
            let time = new Date();
            let mytime = time.toLocaleTimeString(); //获取当前时间
            setMessage(message[0],mytime,oPicSrc)
        } else if (type[0].type === "Unread" && message.length !== 0) {
            message.forEach(setUnread);
            Words.innerHTML += '<li>以上未读</li>';
        }
    };

    function setUnread(item) {
        setMessage(item,formatDate(item.messageDate),oPicSrc);
    }

    function sendMessage(TalkWords) {
        let message = JSON.stringify({
            'messageText': TalkWords,
            'toId': oid,
            'fromName': username,
            'fromId': uid
        });
        webSocket.send(message);
    }

    //关闭按钮调用函数
    function clo() {
        webSocket.close(3000, "强制关闭");
    }

    window.onbeforeunload = function () {
        clo();
    };
</script>
</body>
</html>